<template>
    <div class="tmpList">
        <div class="header" ref="content">
            <h1>模板列表（{{ total }}）</h1>
            <div class="form">
                <el-button type="primary" size="large" @click="toAdd">新增</el-button>
                <el-input size="small" v-model="form.keyword" placeholder="搜索方案标题" prefix-icon="Search" @blur="getList(true)"></el-input>
            </div>
        </div>
        <div class="content" v-if="schemeList.length">
            <div class="scrollContent" :infinite-scroll-disabled="infiniteScrollDisabled" :infinite-scroll-immediate="false" v-infinite-scroll="load">
                <div v-for="item in schemeList" :key="item.id" class="item" @click="toDetail(item)">
                    <img :src="item.coverPath" alt="">
                    <h2>{{item.name}}</h2>
                </div>
            </div>
        </div>
        <div class="noContent" v-else>
            暂无模板数据
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import {tplList} from './api/req';


const content = ref(null)
const leftType = ref('tmp')
const subsectionId = ref(null)
const router = useRouter()
const total = ref(0)
const infiniteScrollDisabled = ref(false)
const form = reactive({
    keyword: '',
    pageSize: 12,
    page: 1
})

const schemeList = ref([])


const toAdd = () => {
    router.push('templates/addScheme')
} 

onMounted(() => {
    getList()
})

const load = () => {
    form.page += 1
    getList()
}

const getList = async (flag) => {
    try {
        let res = await tplList(form)
        if (res.code === 0) {
            if (flag) {
                schemeList.value = res.data.list
            } else {
                if (res.data.list.length) {
                    schemeList.value = schemeList.value.concat(res.data.list)
                } else {
                    infiniteScrollDisabled.value = true
                }
            }
            total.value = res.data.total
        }
    } catch (error) {
    }
}

const setType = (type, id = undefined) => {
    leftType.value = type;
    subsectionId.value = id;
}

const handleFileSelect = function (event) {
    readFileInputEventAsArrayBuffer(event, arrayBuffer => {
        mammoth
            .convertToHtml({ arrayBuffer: arrayBuffer })
            .then(displayResult)
            .done();
    });
}
const readFileInputEventAsArrayBuffer = (event, callback) => {
    var file = event.file;
    var reader = new FileReader();
    reader.onload = function (loadEvent) {
        var arrayBuffer = loadEvent.target.result;
        callback(arrayBuffer);
    };
    reader.readAsArrayBuffer(file);
}
const displayResult = (result) => {
}

const toDetail = (item) => {
    router.push({
        path: 'templates/viewScheme',
        query: {
            id: item.ID
        }
    })
}

defineOptions({
    name: 'templates'
})
</script>

<style lang="scss" scoped>
.tmpList {
    display: flex;
    height: 100%;
    overflow: hidden;
    flex-direction: column;
    .header {
        padding: 20px;
        background-color: #fff;
        & > div {
            display: flex;
            .el-button {
                margin-right: 10px;
            }
        } 
    }
    .content {
        overflow: hidden;
        flex: 1;
        margin-top: 20px;
        .scrollContent {
            overflow-y: scroll;
            display: flex;
            flex-wrap: wrap;
            height: 100%;
            gap: 1rem;
            .item {
                width: 280px;
                height: 350px;
                background-color: #fff;
                display: flex;
                flex-direction: column;
                cursor: pointer;
                h2 {
                    height: 24px;
                    padding: 0 20px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                img {
                    flex: 1;
                    height: 256px;
                }
            }
        }
    }
    .noContent {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        margin-top: 20px;
        font-size: 20px;
        color: #ccc;
    }
}
</style>